﻿@page "/datagrid/remote-data"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
<p>This sample demonstrates the way of data binding DataGrid component with remote service. The DataGrid data source is bound to remote data using DataManager component.</p>
</SampleDescription>
<ActionDescription>
   <p>The DataGrid supports data binding. The DataManager component can be used to configure DataGrid to bind remote data.</p>
   <p>The DataManager, which will act as an interface between the service endpoint and the DataGrid, will require the below minimal information to interact with service endpoint properly,</p>
   <ul>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url'>SfDataManager.Url</a></code> - Defines the service endpoint to fetch the data</li>
       <li><code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor'>SfDataManager.Adaptor</a></code> - Defines the adaptor option. By default, <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.UrlAdaptor.html'>ODataAdaptor</a></code> is used for remote binding.</li>
    </ul>
    <p>Adaptor is responsible for processing the response and request from/to the service endpoint. The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.html'>Syncfusion.Blazor.Data</a></code> namespace provides some predefined adaptors which are designed to interact with particular service endpoints. The predefined adaptors are,</p>
    <ul>
        <li><strong>UrlAdaptor</strong> - Use this to interact with any remote service. This is the base adaptor for all remote based adaptors.</li>
        <li><strong>ODataAdaptor</strong>- Use this to interact with OData endpoints.</li>
        <li><strong>ODataV4Adaptor</strong> - Use this to interact with OData V4 endpoints.</li>
        <li><strong>WebApiAdaptor</strong> - Use this to interact with Web API created under OData standards.</li>                    </ul>
    <p>In this demo, remote data is bound by assigning service data as an instance of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html'>DataManager </a></code> component.</p>
    <p>More information on the remote data binding can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/data-binding/#remote-data'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfGrid AllowPaging="true"  TValue="OrdersDetails" >
                <SfDataManager Url="https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Adaptors.ODataAdaptor"></SfDataManager>
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
